<template>
	<div class="storeinfo">
		<div class="search">
			<el-input placeholder="请输入门店名" v-model="storename" @keyup.native.enter="Searchstoreinfo"></el-input>
			<el-input placeholder="请输入联系方式" v-model="storephone" @keyup.native.enter="Searchstoreinfo"></el-input>
				<el-button @click="Searchstoreinfo" class="searchBtn" type="info" :icon="Search">搜索</el-button>
				<el-button @click="addstore" class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
		</div>
		<div class="chart">
			<el-table :data="tablestore" style="width: 100%">
				<el-table-column prop="iserIcon" label="头像">
					<template  #default="scope">
						<img style="width:50px;height:50px;" :src="baseUrl+scope.row.iserIcon"/>
					</template>
				</el-table-column>
				<el-table-column prop="adminName" label="门店名"  />
				<el-table-column prop="adminAccount" label="账号" />
				<el-table-column prop="adminPhone" label="联系方式" />
				<el-table-column label="操作">
					<template #default = "score">
						<el-button type="primary" style="width: 50px; cursor: pointer;" @click="goupdatestore(score.row)">修改</el-button>
						<el-button type="danger"	style=" width: 50px; cursor: pointer;" @click="delstore(score.row.adminId)" >删除</el-button>
					</template>
				</el-table-column>
			  </el-table>
			  <el-pagination
				layout="prev,pager,next"
				:page-count="totals"
				:page-size="pageSize"
				v-model:current-page="pageIndexstore"	
				@current-change="changePagestore"
			  ></el-pagination>
		</div>
		<!-- 添加门店信息 -->
		<el-dialog v-model="storeDialogVisible" title="添加门店" width="400" left>
			<el-form
			ref="myForms"
			:model="formstore"
			:rules="rules"
			style="width:100%;margin-top: 20px;"
			hide-required-asterisk=true
			>	<el-form-item prop="file" label="选择头像:" label-width="100" style="width:80%">
					<el-upload
						:action="baseUrl+'admin/addStoreImage'"
						ref="upload"
					    :data="myData" 
						:show-file-list="false"
					    list-type="picture-card"
					    :on-change="addstorehandleChange"
					    :before-upload="beforeAvatarUpload"
					  >
					    <el-icon v-if="!storeimageUrl"><Plus /></el-icon>
						<img slot="trigger" v-if="storeimageUrl" :src="formstore.storeimageUrl" class="avatar">
					</el-upload>
				</el-form-item>
				<el-form-item prop="adminName" label="门店名:" label-width="100" style="width:80%">
					<el-input v-model="formstore.adminName" placeholder="请输入门店名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminAccount" label="账号:" label-width="100" style="width:80%">
					<el-input v-model="formstore.adminAccount" placeholder="请输入账号" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminPassword" label="密码:" label-width="100" style="width:80%">
					<el-input type="password" v-model="formstore.adminPassword" placeholder="请输入密码" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminPhone" label="联系方式" label-width="100" style="width:80%">
					<el-input v-model="formstore.adminPhone" placeholder="请输入联系方式" style="width:205px"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
			  <div class="dialog-footer">
				<el-button style="background: #0f6ab1;" type="primary" @click="storesure(myForms)">确认</el-button>
				<el-button type="info" style="background: #999;"  @click="clearadmininfo(myForms)">取消</el-button>
			  </div>
			</template>
		</el-dialog>
		<!-- 修改门店信息 -->
		<el-dialog v-model="updatestoreDialog" title="修改门店" width="400" left>
			<el-form
			ref="myForm"
			:model="storeupdate"
			:rules="rules"
			style="width:100%;margin-top: 20px;"
			hide-required-asterisk=true
			>	
				<el-form-item prop="file" label="选择头像:" label-width="100" style="width:80%">
					<el-upload
						:action="storeupdate.imageUrlS"
					    :data="myData" 
						:show-file-list="false"
						:auto-upload="false"
					    list-type="picture-card"
					    :on-change="storeimgChange"
					    :before-upload="beforeAvatarUpload"
					  > 
					<img slot="trigger" :src="baseUrls+storeupdate.storeimgurl" class="avatar">
					</el-upload>
				</el-form-item>
				<el-form-item prop="adminName" label="门店名:" label-width="100" style="width:80%">
					<el-input v-model="storeupdate.adminName" placeholder="请输入门店名" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminAccount" label="门店账号:" label-width="100" style="width:80%">
					<el-input v-model="storeupdate.adminAccount" placeholder="请输入门店账号" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminPassword" label="门店密码:" label-width="100" style="width:80%">
					<el-input type="password" v-model="storeupdate.adminPassword" placeholder="请输入门店密码" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminId" label="门店id:" label-width="100" style="width:80%">
					<el-input  v-model="storeupdate.adminId"  style="width:205px" disabled></el-input>
				</el-form-item>
				<el-form-item prop="adminPhone" label="联系方式" label-width="100" style="width:80%">
					<el-input v-model="storeupdate.adminPhone" placeholder="请输入联系方式" style="width:205px" ></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
			  <div class="dialog-footer">
				<el-button style="background: #0f6ab1;" type="primary" @click="surestoreupdate(myForm)">确认</el-button>
				<el-button type="info" style="background: #999;"  @click="clearadmininfo(myForm)">取消</el-button>
			  </div>
			</template>
		</el-dialog>
	</div>
	<!-- 删除提示框 -->
	<el-dialog v-model="delDialogVisibles"  width="400" center>
		<p style="text-align: center;">
		 确认删除该信息
		</p>
		<template #footer>
		  <div class="dialog-footer">
			<el-button style="background: #0f6ab1;" type="primary" @click="sureDelstore">确认</el-button>
			<el-button type="info" style="background: #999;"  @click="delDialogVisibles = false">取消</el-button>
		  </div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import {ref,reactive} from "vue"
	import { Search,CirclePlus,ArrowRight,Plus} from '@element-plus/icons-vue';
	import {admininfo,storeinfo,searchadmininfo,searchstoreinfo,addadmininfo,adminchangeinfo,adminfindinfo,
	infodel,addstoreinfos,changestoreinfos} from "../api/zhy"
	import {baseUrl} from "../utils/request.ts"
	import { ElMessage,ElMessageBox} from 'element-plus'
	let total=ref(0)
	let tablestore=ref([])
	let pageSize=ref(5)
	let pageIndex=ref(1)
	let adminF=ref(true)
	let storephone=ref()
	let storename=ref()
	let imageUrl=ref()
	let imageUrlS=ref()
	let storeimageUrl=ref()
	let myData=reactive({})
	let totals=ref(0)
	let addflag=ref<boolean>(true)
	let updateflag=ref<boolean>(false)
	let baseUrl2=baseUrl;
	let myForm=ref(null);
	let myForms=ref(null)
	let baseUrls=baseUrl
	let formstore=reactive({
		storeimageUrl:"",
		adminName:"",
		adminAccount:"",
		adminPhone:"",
		adminPassword:"",
	})
	let storeupdate=reactive({
		storeimgurl:"",
		adminName:"",
		adminAccount:"",
		adminPhone:"",
		adminId:"",
		adminPassword:"",
	})
	// 门店信息
	let pageIndexstore=ref(1)
	const initstoreinfo=async()=>{
		let res=await storeinfo({
			pageSize:pageSize.value,
			pageIndex:pageIndexstore.value,
		})
		Object.assign(tablestore.value,res.context)
		// console.log(res.context,"hhhhhhh")
		// tablestore.value=res.context
		totals.value=res.pageTotal
	}
	initstoreinfo()
	const store=()=>{
		active2.value=2
		active1.value=2
		adminF.value=false
		initstoreinfo()
	}
	//门店信息搜索searchstoreinfo
	const Searchstoreinfo=async()=>{
		let res=await searchstoreinfo({
			adminName:storename.value,
			adminPhone:storephone.value,
			pageSize:pageSize.value,
			pageIndex:pageIndexstore.value
		})
		// console.log(res,"搜索门店信息")
		tablestore.value=res.context
		totals.value=res.pageTotal
	}
	//添加门店信息
	let storeDialogVisible=ref(false)
	let addstoreimg=ref()
	const addstore=()=>{
		storeDialogVisible.value=true
		addstoreimg.value=""
		storeimageUrl.value=""
		formstore=reactive({
			storeimageUrl:"",
			adminName:"",
			adminAccount:"",
			adminPhone:"",
			adminPassword:"",
		})
	}
	const addstorehandleChange=(file,fileList)=>{
		// console.log('ddddd')
		// console.log(file.status)
		if(file.status=="success"){
			addstoreimg.value=file.response.msg
			// addstoreimg.value=file.raw
			formstore.storeimageUrl = URL.createObjectURL(file.raw)//文件回显图片
			storeimageUrl.value=formstore.storeimageUrl.substring(4,formstore.storeimageUrl.length)
			// console.log(addstoreimg.value,'storeimageUrl。。。。。。。。。。。')
		}
	}
	// iserIcon
	const storesure=async(formData)=>{
				let res=await addstoreinfos({
					iserIcon:addstoreimg.value,
					adminName:formstore.adminName,
					adminAccount:formstore.adminAccount,
					adminPhone:formstore.adminPhone,
					adminPassword:formstore.adminPassword,
				})
				// console.log(res,"门店信息添加....")
				Searchstoreinfo()
				storeDialogVisible.value=false
				if(res==undefined){
					ElMessage.success("信息添加成功")
				}
	}
	//修改门店信息
	let storefile=ref()
	const storeimgChange=async(file, fileList)=>{
		storeupdate.storeimgurl = URL.createObjectURL(file.raw);
		storefile.value=file.raw
		baseUrls=""
	}
	let updatestoreDialog=ref(false)
	const goupdatestore=async(data)=>{
		updatestoreDialog.value=true
		storeupdate=data
		storeupdate.storeimgurl=data.iserIcon
		baseUrls=baseUrl
		// console.log(data,"data")
	}
	const surestoreupdate=async()=>{
		let res=await changestoreinfos({
			file:storefile.value,
			adminName:storeupdate.adminName,
			adminAccount:storeupdate.adminAccount,
			adminPhone:storeupdate.adminPhone,
			adminId:storeupdate.adminId,
			adminPassword:storeupdate.adminPassword,
		})
		updatestoreDialog.value=false
		ElMessage.success("信息修改成功")
		initstoreinfo()
	}
	//门店分页
	const changePagestore=(page)=>{
		pageIndexstore.value=page;
		Searchstoreinfo()
	}
	//删除门店信息
	let storeid=ref()
	let delDialogVisibles=ref(false)
	const delstore=async(id)=>{
		storeid.value=id
		delDialogVisibles.value=true
	}
	const sureDelstore=async()=>{
		let res=await infodel({
			adminId:storeid.value,
		})
		Searchstoreinfo()
		initstoreinfo()
		delDialogVisibles.value=false
		ElMessage.success("信息删除成功")
	}
	//点击取消清空数据
	const clearadmininfo=(formData)=>{
		formData.resetFields()
	}
	// 要验证那些数据  是否必填 提示信息 失去焦点时提示
		let rules=reactive({
			// file:[
			// 	{required:true,message:"头像不能为空",trigger:"blur"}
			// ],
			adminName:[
				{required:true,message:"用户名不能为空",trigger:"blur"}
			],
			adminAccount:[
				{required:true,message:"账号不能为空",trigger:"blur"}
			],
			adminPassword:[
				{required:true,message:"密码不能为空",trigger:"blur"}
			],
			adminPhone:[
				{ required: true, message: '联系方式不能为空', trigger: 'blur' },
				{ pattern:/^1([3-9])\d{9}$/, message: '请输入正确手机号', trigger: 'blur' },
			],
		})
</script>

<style scoped lang="less">
	.search{
		width:100%;
		// height: 40px;
		margin-top: 10px;
	}
	.el-input{
	    width: 150px;
		// height: 40px;
	    margin-right:30px;
	    border: none;
	 }
	 .searchBtn{
	    background-color: #106ab1;
	    border: none;
		// height: 40px;
		margin-right:20px;
	 }
	 .addBtn{
	    background-color: #00a0e9;
	    border: none;
		// height: 40px;
		float: right;
	 }
	:deep(.el-table tr){
		height: 80px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	 // 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}

	 img {
		width:100%;
		height:100%;
		border-radius:50%;
		object-fit: cover;
	}
</style>